import { drawSlideShow, assistantListAtom, currentAssistantIdAtom } from '@/atoms'
import { useAtom } from 'jotai'
import { Box, IconButton, Tooltip } from '@mui/material'
import useAssistant from '@/hooks/useAsisstant'
import InputBox from '@/components/Pannel/InputBox'
import MessageList from '@/components/Pannel/MessageList'
import { showEditAssistantDialog } from '@/components/Dialogs/AssistantEdit'
import { showSettingDialog } from '@/components/Dialogs/SettingDialog'
import { showAlertDialog } from '@/components/Base/Alert'
import { useTranslation } from 'react-i18next'
import AssistantBtn from './AssistantBtn'
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from '@dnd-kit/core'
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable'

export default function MainPane() {
  const { t } = useTranslation()
  const { deleteAssistant, copyAssistant } = useAssistant()
  const [drawShow, setDrawShow] = useAtom(drawSlideShow)
  const [currentAssistant, setCurrentAssistant] = useAtom(currentAssistantIdAtom)
  const [assistants, setAssistants] = useAtom(assistantListAtom)
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  )

  const deleteItem = (id: string) => {
    showAlertDialog({
      title: t('make sure for delete'),
      content: t('cant reply if delete'),
      onOk: () => {
        deleteAssistant(id)
      },
    })
  }

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event

    if (over && active.id !== over!.id) {
      setAssistants((items) => {
        const oldIndex = items.findIndex(item => item.id == active.id)
        const newIndex = items.findIndex(item => item.id == over.id)
        const newArr = arrayMove(items, oldIndex, newIndex)
        return newArr
      })
    }
    else {
      // 可以近似堪称点击事件
      setCurrentAssistant(active.id)
    }
  }

  return (
    <Box className="h-full w-full flex flex-col">
      <div className="h-3.5rem flex items-center justify-between shadow-custom-light dark:shadow-custom-dark">
        <IconButton size="small" sx={{ margin: '0 1rem' }} onClick={() => setDrawShow(true)} color="inherit">
          {!drawShow
            ? (
                <div className="i-material-symbols:format-indent-increase-rounded" />
              )
            : ''}
        </IconButton>
        <Box className="flex flex-1 items-center justify-start">
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragEnd={handleDragEnd}
          >
            <SortableContext
              items={assistants}
              strategy={verticalListSortingStrategy}
            >
              <Box className="flex items-center gap-2">
                {
                  assistants.map((item) => {
                    return (
                      <AssistantBtn
                        variant={currentAssistant == item.id ? 'contained' : 'outlined'}
                        key={item.id}
                        id={item.id}
                      >
                        {item.name}
                        {
                          (currentAssistant == item.id)

                            ? (
                                <div className="ml-1 flex justify-end gap-1">
                                  <div
                                    onMouseUp={(e) => {
                                      e.stopPropagation()
                                      showEditAssistantDialog(item.id)
                                    }}
                                    className="i-material-symbols:edit-square-outline-rounded"
                                  />
                                  <div
                                    onMouseUp={(e) => {
                                      e.stopPropagation()
                                      copyAssistant(item.id)
                                    }}
                                    className="i-material-symbols:content-copy-outline"
                                  />
                                  <div
                                    onMouseUp={(e) => {
                                      e.stopPropagation()
                                      deleteItem(item.id)
                                    }}
                                    className="i-material-symbols:close-rounded"
                                  />
                                </div>
                              )
                            : ''
                        }
                      </AssistantBtn>
                    )
                  })
                }
              </Box>
            </SortableContext>
          </DndContext>
          <Tooltip title={t('add assistant tip')} arrow>
            <IconButton size="small" onClick={() => showEditAssistantDialog()}>
              <div className="i-material-symbols:add-rounded" />
            </IconButton>
          </Tooltip>
        </Box>
        <Tooltip title={t('global setting tip')} arrow>
          <IconButton size="small" onClick={() => showSettingDialog()}>
            <Box className="i-material-symbols:settings-rounded text-primary" />
          </IconButton>
        </Tooltip>
      </div>
      <div className="w-full flex flex-1 flex-col items-center overflow-auto">
        <MessageList />
        <InputBox />
      </div>
    </Box>
  )
}
